<template>
    <div>
        <!--查询条件start --111s-->
        <el-card>
        <el-form :inline="true"
                 :model="query"
                 class="query-form"
                 size="small">
            <el-form-item class="query-form-item">
                <el-input v-model="query.commodityname"
                          placeholder="商品名称"
                          prefix-icon="el-icon-search"
                          @keyup.enter.native="onSubmit"
                          clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           icon="el-icon-refresh"
                           @click="onRest"></el-button>
                <el-button type="primary"
                           icon="el-icon-search"
                           @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!--查询条件end-->

        <!--列表start --->
        <el-table ref="multipleTable"
                  v-loading="loading"
                  :data="list"
                  :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                  @selection-change="handleSelectionChange"
                  border>
            <el-table-column type="selection"
                                width="40"
                                fixed />
            <el-table-column label="序号" prop="commodityname" width="150" align="center">
                <template slot-scope="scope">
                    <span>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品ID" width="200" prop="commodityid" align="center"/>
            <el-table-column label="商品名称"
                             align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.busCommodity.commodityname}}</span>
                </template>
            </el-table-column>
            <el-table-column label="当前库存"
                             width="200"
                             prop="nowinventory"
                             align="center"/>
            <el-table-column label="操作"
                             width="200"
                             align="center" fixed="right">
                <template slot-scope="scope">
                    <!-- <el-button type="danger"
                                size="mini"
                                @click.native="handleDel(scope.row.dailynewid)">删除</el-button> -->
                    <el-button type="primary"
                               size="mini"
                               @click.native="showDialogAddOrEdit(scope.$index,scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页模块start-->
        <el-pagination class="pagination-container"
                       background
                       :page-size="query.pageSize"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       layout="total,sizes,prev, pager, next, jumper"
                       :current-page="query.currentPage"
                       :page-sizes="[5,10, 20, 30, 50]"
                       :total="totalNumber"></el-pagination>
        <!--分页模块end-->

        <!--新增/编辑弹框start--333s-->
        <el-dialog title="查看订单"
                   :visible.sync="dialogAddOrEdit"
                   width="50%"
                   top="5vh"
                   :before-close="hideDialogAddOrEdit"
                   :close-on-click-modal="false">
            <template slot="title">
                <div class="avue-crud__dialog__header">
                    <span class="el-dialog__title">
                    <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                    查看订单
                    </span>
                </div>
            </template>
            <el-card>
            <el-form :model="checkQuery"
                     :rules="rules"
                     ref="ruleForm"
                     class="demo-ruleForm">

                <el-form-item prop="userId">
                    <el-input v-model="checkQuery.pickuporderno" style="width:400px;margin-right: 20px;" placeholder="订单编号" clearable></el-input>
                    <el-button type="primary"
                               icon="el-icon-search"
                               @click="onSubmitDialog">查询</el-button>
                </el-form-item>

                <!--列表start --->
                <el-table ref="merchantsgoodslist"
                          v-loading="checkLoading"
                          :data="merchantsgoodslist"
                          :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                          @selection-change="checkHandleSelectionChange"
                          border>
                    <el-table-column label="序号"
                                     prop="commodityid"
                                     width="100"
                                     align="center">
                        <template slot-scope="scope">
                            <span>{{scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单编号"
                                     width="350"
                                     prop="pickuporderno"
                                     align="center" />
                    <el-table-column label="商品名"
                                     prop="commodityname"
                                     align="center" />
                    <el-table-column label="提货数量"
                                     width="150"
                                     prop="pickupnum"
                                     align="center" />
                    <el-table-column label="提货状态"
                                     width="150"
                                     prop="secondorderstatus"
                                     align="center" >
                        <template slot-scope="scope">
                            <!-- 0:待付款 1:待发货 2:待收货 3:待评价 4:已完成 -->
                            <span v-if="scope.row.secondorderstatus == 0" style="margin-left:20px;color:#dc0101;">待付款</span>
                            <span v-else-if="scope.row.secondorderstatus == 1" style="margin-left:20px;color:#ffa659;">待发货</span>
                            <span v-else-if="scope.row.secondorderstatus == 2" style="margin-left:20px;color:#ffa659;">待收货</span>
                            <span v-else-if="scope.row.secondorderstatus == 3" style="margin-left:20px;color:#ffa659;">已完成</span>
                            <span v-else-if="scope.row.secondorderstatus == 4" style="margin-left:20px;color:#4acf1e;">关闭</span>
                             <span v-else-if="scope.row.secondorderstatus == 5" style="margin-left:20px;color:#4acf1e;">取消</span>
                            <span v-else style="margin-left:20px;color:#dc0101;">待付款</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"
                                     width="200"
                                     align="center">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.secondorderstatus == 2" type="primary"
                                       prop="secondorderstatus"
                                       size="mini"
                                       @click.native="onReceivingGoods(scope.row)">确认收货</el-button>
                            <span v-else> - </span>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页模块start-->
                <!-- <el-pagination class="pagination-container"
                               background
                               :page-size="checkQuery.pageSize"
                               @size-change="checkHandleSizeChange"
                               @current-change="checkHandleCurrentChange"
                               layout="total,sizes,prev, pager, next, jumper"
                               :current-page="checkQuery.currentPage"
                               :page-sizes="[5,10, 20, 30, 50]"
                               :total="checkTotalNumber"></el-pagination> -->

            </el-form>
            </el-card>
        </el-dialog>
        </el-card>
    </div>
</template>
<script>
import {
    getPickUpOrdersList, // 获取商品列表
    deleteDailyNew,
    batchAddDailyNew,
    changeStatus, // 确认收货
    getDetailList // 商品订单详情
} from "../../api/activityCommodity/activityCommodity.js";
import { BASE_URL } from "../../config/app";
/*用作表单的数据初始化*/
const formJson = {
    currentPage: 1,
    yuninventoryid: null, // 商品主键id
    pickuporderno: null, // 订单编号
    pageSize: 10
};

export default {
    components: {},
    data() {
        return {
            uploadUrl: BASE_URL + "/goldendays-currency/tool/uploadpro", //上传图片
            uploadData: [],
            query: {
                currentPage: 1,
                commodityname: null,
                pageSize: 5
            },
            checkQuery: {
                currentPage: 1,
                pageSize: 5,
                yuninventoryid: null,
                pickuporderno: null
            },
            commodityIdArr: [],
            checkTotalNumber: 0, //分页总页数
            formName: null,
            formMap: {
                add: "添加",
                edit: "编辑"
            },
            merchantslist: [],
            merchantsgoodslist: [],
            list: [], //列表集合
            totalNumber: 0, //分页总页数
            loading: true, //列表加载
            checkLoading: false,
            formSumbitLoding: false, //表单提交加载
            cancelToggle: false, //列表是否全选
            multipleSelection: [], //多选集合
            dialogAddOrEdit: false, //新增或编辑弹框开关
            dialogAddOrEditName: "", //新增或编辑弹框名字
            formData: formJson, //新增或修改的对象
            rules: {
                //表单校验
                // userId: {
                //     required: true,
                //     message: "请选择商户",
                //     trigger: "blur"
                // },

                ids: {
                    required: true,
                    message: "请选择商品",
                    trigger: "blur"
                }
            }
        };
    },

    methods: {
        //上传图片
        handleSuccess(response, file) {
            this.isSelect = false;
            console.log("上传成功");
            if (response.status === 1) {
                const filePath = response.data;
                this.formData.topcategorypic = filePath;
                console.info(filePath + file);
                //  alert(JSON.stringify(this.uploadData));
                return;
            }

            this.$message.error("上传文件报错");
        },
        handleChange(file) {
            this.fileName = file.name ? file.name : "";
            return false;
        },

        /*获取列表事件*/
        getPickUpOrdersList() {
            this.loading = true;
            //   getTopList
            getPickUpOrdersList(this.query)
                .then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        this.loading = false;
                        return false;
                    }
                    console.log(response);
                    this.list = response.data.list || [];
                    this.totalNumber = response.data.totalNumber || 0;
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                });
        },

        /*新增或者编辑提交事件*/
        formSumbit() {
            //表单校验通过
            let commodityIds = this.commodityIdArr.toString();
            this.formData.commodityIds = commodityIds;
            console.info(this.formData);
            this.$refs["ruleForm"].validate(valid => {
                // console.log(valid)
                if (valid) {
                    this.formSumbitLoding = true;
                    this.formData.inputdata = JSON.stringify(this.formData);
                    batchAddDailyNew(this.formData)
                        .then(response => {
                            this.formSumbitLoding = false;
                            if (response.code != 0) {
                                this.$message.error(response.message);
                                return false;
                            }
                            this.merchantsgoodslist = [];
                            this.checkTotalNumber = 0;
                            this.$message.success("操作成功");
                            this.hideDialogAddOrEdit();
                            // 加载表格数据
                            this.getPickUpOrdersList();
                        })
                        .catch(() => {
                            this.formSumbitLoding = false;
                        });
                }
            });
            //new URLSearchParams(this.query)  提交数据格式不正确时可以转一下
        },

        closeCheck() {
            this.dialogAddOrEdit = false;
            this.merchantsgoodslist = [];
            this.checkTotalNumber = 0;
        },
        /*列表查询条件事件*/
        onSubmit() {
            this.query.currentPage = 1;
            this.getPickUpOrdersList();
        },

        /*刷新*/
        onRest() {
            //刷新事件需要重置查询条件
            this.query = {
                currentPage: 1,
                pageSize: 10
            };
            this.getPickUpOrdersList();
        },

        /*显示 -新增或者编辑弹框*/
        showDialogAddOrEdit(index, row) {
            console.log(index, row);
            this.formData = Object.assign({}, formJson);
            this.dialogAddOrEdit = true;
            this.checkQuery.yuninventoryid = row.yuninventoryid;
            this.getDetailList();
        },

        /*隐藏 -新增或编辑弹框*/
        hideDialogAddOrEdit() {
            this.dialogAddOrEdit = false;
            this.merchantsgoodslist = [];
            //隐藏弹框时需要清除弹框内容
            if (this.$refs["ruleForm"]) {
                this.$refs["ruleForm"].resetFields(); //清除formData表单
                this.$refs["ruleForm"].clearValidate(); //清除表单验证
            }
            //如果上传文件，还需要清除文件列表
        },
        getDetailList() {
            this.checkLoading = true;
            getDetailList(this.checkQuery)
                .then(response => {
                    console.log(response);
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        this.checkLoading = false;
                        return false;
                    }
                    this.checkLoading = false;
                    this.checkTotalNumber = response.data.totalNumber || 0;
                    this.merchantsgoodslist = response.data.list || [];
                    console.log(this.merchantsgoodslist);
                })
                .catch(() => {
                    this.checkLoading = false;
                    this.merchantsgoodslist = [];
                });
        },
        // 提货
        onReceivingGoods(row) {
            console.log(row);
            this.$confirm("订单点击确认后，视为已收货状态！~", "收货确认", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$message.success("已收货！");
                    let data = {
                        expresscode: row.expresscode, // 快递编码
                        expressname: row.expressname, // 快递名称
                        expressnumber: row.expressnumber, // 快递单号
                        pickuporderid: row.pickuporderid // 进货订单id
                    };
                    console.log(data);
                    changeStatus(data)
                        .then(response => {
                            console.log(response);
                            if (response.code != 0) {
                                this.$message.error(response.message);
                                this.checkLoading = false;
                                return false;
                            }
                            row.secondorderstatus = 3;
                            this.getDetailList();
                        })
                        .catch(err => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {
                    this.$message.warning("已取消");
                });
        },
        // 弹窗 查询
        onSubmitDialog() {
            this.getDetailList();
        },
        // 弹窗下拉选项变更获取商品
        getMerchantsGoods() {
            this.merchantsgoodslist = [];
            this.formData.ids = "";
            //   let query = {
            //     currentPage: 1,
            //     pageSize: 1000,
            //     userId: this.formData.userId,
            //   }
            this.checkQuery.userId = this.formData.userId;
            console.info(this.checkQuery);
            this.checkLoading = true;
            getMerchantsGoods(this.checkQuery)
                .then(response => {
                    console.log(response);
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        this.checkLoading = false;
                        return false;
                    }
                    this.checkLoading = false;
                    this.checkTotalNumber = response.data.totalNumber || 0;
                    this.merchantsgoodslist = response.data.list || [];
                    console.log(this.merchantsgoodslist);
                })
                .catch(() => {
                    this.checkLoading = false;
                    this.merchantsgoodslist = [];
                });
        },

        /*点击页数*/
        handleCurrentChange(val) {
            this.query.currentPage = val;
            this.getPickUpOrdersList();
        },

        /*选择每页条数【10,20,30,40,50】*/
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.getPickUpOrdersList();
        },
        /*弹窗 选择每页条数【10,20,30,40,50】*/
        checkHandleSizeChange(val) {
            this.checkQuery.pageSize = val;
            this.getDetailList(); // 重新查询列表
        },
        /*弹窗 点击页数*/
        checkHandleCurrentChange(val) {
            this.checkQuery.currentPage = val;
            this.getDetailList(); // 重新查询列表
        },
        /*弹窗 列表复选框选择事件*/
        checkHandleSelectionChange(val) {
            console.log(val);
            let arr = [];
            val.forEach((value, index) => {
                console.log(index);
                arr.push(value.commodityid);
            });
            this.commodityIdArr = arr;
        },
        /*取消全选事件*/
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },

        /*列表复选框选择事件*/
        handleSelectionChange(val) {
            this.multipleSelection = val;
            if (val == "") {
                this.cancelToggle = false;
                return;
            }
            this.cancelToggle = true;
        },

        /*全选删除事件*/
        delGroup() {
            console.log(this.multipleSelection);
            var ids = this.multipleSelection
                .map(item => item.dailynewid)
                .join(); //获取所有选中行的id组成的字符串，以逗号分隔
            if (ids == "") {
                this.$message({
                    message: "请先选择",
                    type: "warning"
                });
                return;
            }
            this.handleDel(ids);
        },

        /*单击删除事件*/
        handleDel(ids) {
            if (ids) {
                this.$confirm("确认要删除吗?", "提示", {
                    type: "warning"
                })
                    .then(() => {
                        this.loading = true;
                        var params = new URLSearchParams();
                        params.append("dailyNewIds", ids);
                        deleteDailyNew(params)
                            .then(response => {
                                this.loading = false;
                                if (response.code) {
                                    this.$message.error(response.message);
                                    return false;
                                }
                                this.$message.success("删除成功");
                                // 刷新数据
                                //this.list.splice(index, 1);
                                this.getPickUpOrdersList();
                            })
                            .catch(() => {
                                this.loading = false;
                            });
                    })
                    .catch(() => {
                        this.$message.warning("已取消");
                    });
            }
        }
    },
    created() {
        this.getPickUpOrdersList();
    }
};
</script>
